<template>
	<view class="container">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block v-slot:content>绑定手机</block>
		</cu-custom>
		<view class="contents-white">
			<view class="input-boxs flex text-center justify-center">
				<view class="padding-top">
					<view class="boxs-info">
						<view>
							<form>
								<view class="cu-form-group margin-top-xs">
									<view class="title">手机号</view>
									<input v-model="fromParams.phone" placeholder="请输入账户" name="input" />
								</view>
								<view class="cu-form-group">
									<view class="title">验证码</view>
									<input v-model="fromParams.verifyCode" placeholder="请输入验证码" name="input" />
									<button v-if="countdown == 0" @click="getCode"
										class="cu-btn bg-green shadow">验证码</button>
									<button v-else class="cu-btn bg-gray shadow">{{ countdown }}秒</button>
								</view>
							</form>
							<view class="flex flex-direction padding">
								<button class="cu-btn round lg text-white text-size-32 bg-gradual-blue" type="primary"
									@click="handleBind">立即绑定</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import cuCustom from '@/components/cu-custom.vue';
	import { ref } from 'vue';
	import { useSettingStore } from '@/stores/index';
	import { bind, verifyCode, userInfo } from '@/common/api/login';
	const setting = useSettingStore();
	const countdown = ref(0);
	const fromParams = ref({
		bindMethod: 'bindPhone',
		phone: '',
		verifyCode: ''
	});
	const getCode = async (e : any) => {
		if (!fromParams.value.phone) {
			uni.showToast({
				title: '请填写手机号码',
				icon: 'none'
			});
			return;
		}
		if (countdown.value != 0) {
			return
		}
		countdown.value = 60;
		verifyCode({ phone: fromParams.value.phone }).then((res : any) => {
			if (res.code == 1000) {
				let timer = setInterval(() => {
					if (countdown.value > 0) {
						countdown.value--;
					} else {
						clearInterval(timer);
					}
				}, 1000);
			}
		})
	};
	const onUserInfo = () => {
		userInfo({}).then((res : any) => {
			setting.userInfo = res.data;
			uni.switchTab({
				url: '/pages/index/index'
			});
		});
	};
	const handleBind = () => {
		bind(fromParams.value).then((res : any) => {
			if (res.code == 1000) {
				onUserInfo();
			} else {
				uni.showModal({
					title: '提示',
					content: res.msg,
					success() {
						onUserInfo();
					}
				})
			}

		});
	};
</script>

<style></style>